<template>
    <div>
      <div class="footer">
        <div v-for="(item,index) in items" @click="foot(item.push,index)">
          <img :src="idx==index?item.iconSelect:item.icon" alt="">
          <p :class="idx==index?'bluez':'grayz'">{{item.name}}</p>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Homepage",
      props:['idx'],
      data(){
          return{
            items:[{
              cls:"home",
              name:"首页",
              push:"/",
              icon:"static/img/tab/shouyehui.png",
              iconSelect:"static/img/tab/shouyelan.png"
            },
              {
                cls:"shares",
                name:"课程",
                push:"/kecheng",
                icon:"static/img/tab/kechenghui.png",
                iconSelect:"static/img/tab/kechenglan.png"
              },
              {
                cla:"community",
                name:"小七圈",
                push:"/xiaoqi",
                icon:"static/img/tab/xiaoqihui.png",
                iconSelect:"static/img/tab/xiaoqilan.png"
              },
              {
                cla:"mine",
                name:"我的",
                push:"/ge",
                icon:"static/img/tab/wodehui.png",
                iconSelect:"static/img/tab/wodelan.png"
              }],
            n:'',
            s:'nihao'
          }
      },
      methods:{
        foot(r,index){
          // this.n = index
          this.$router.push({
            path:r
          })
        },
      },
      mounted() {


      },
      beforeCreate(){
          // console.log(this.$route.path)

        // if (this.$route.path == '/'){
        //   this.n = 0;
        // }else if (this.$route.path == '/ge'){
        //   this.n = 3;
        // } else if(this.$route.path == '/kecheng'){
        //   this.n = 1;
        // }else {
        //   this.n = 2;
        // }

      }
    }
</script>

<style scoped>
    .footer{
      width: 100%;
      height:0.98rem;
      background:rgba(255,255,255,1);
      box-shadow:0 -0.03rem 0.05rem 0 rgba(71,68,80,0.06);
      opacity:0.95;
      position: fixed;
      bottom: 0;
      z-index: 999;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  .footer div{
    text-align: center;
    font-size:0.24rem;
  }
  .footer div img{
    width: 0.5rem;
  }
  .grayz{
    color:rgba(194,201,211,1);
  }
  .bluez{
    color:rgba(2,135,255,1);
  }
</style>
